<template>
  <el-card class="box-card" style="width: 100%">
       <div style="text-align: center;" slot="header" class="clearfix">
      <el-form :inline="true" :model="macApply">
         <el-form-item label="搜索" :label-width="formLabelWidth">
          <el-select   v-model="macApply.state" placeholder="请选择查看" @change="showMacApply()">
          <el-option label="全部" value=0>全部</el-option>
          <el-option label="未审核" value=1>未审核</el-option>
          <el-option label="通过" value=2>通 过</el-option>
          <el-option label="未通过" value=3>未通过</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="macApply.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始注册日期"
            end-placeholder="结束注册日期"
            value-format="yyyy-MM-dd HH-mm-ss"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showMacApply()"
            ><i class="el-icon-search"></i
          ></el-button>
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="addMacApply()"
            >申请新设备</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- ----------------------表格--------------------------- -->
    <el-table :data="macApplyList" stripe style="width: auto">
         <el-table-column prop="id" label="序号" > </el-table-column>
         <el-table-column prop="num" label="设备申请编号"> </el-table-column> 
         <el-table-column prop="empName" label="申请人姓名" ></el-table-column> 
         <el-table-column prop="applyDate" label="申请时间" ></el-table-column> 
         <el-table-column prop="macTypeName" label="申请设备类型" ></el-table-column> 
         <el-table-column prop="nums" label="申请数量" ></el-table-column> 
         <el-table-column prop="roleName" label="申请原因" >
          <template slot-scope="scope">
          <div v-if="scope.row.why == 1">库存不足</div>
          <div v-if="scope.row.why == 2">其他</div>
           </template>   
          </el-table-column> 
         <el-table-column prop="money" label="申请金额" ></el-table-column> 
         <el-table-column prop="state" label="审核状态" >
         <template slot-scope="scope">
          <div v-if="scope.row.state == 1">未审核</div>
          <div v-if="scope.row.state == 2">通 过</div>
          <div v-if="scope.row.state == 3">未通过 </div>
           </template>            
          </el-table-column>    
     <el-table-column label="操作" width="180" align="center">  
      <template slot-scope="scope">
        <div>
            <el-button size="mini" type="primary" @click= "updateg(scope.row.id,scope.row.state)"
            >通  过</el-button 
          >  
          <el-button size="mini" type="primary" @click= "updateb(scope.row.id,scope.row.state)"
            >不通过</el-button 
          >  
        </div>
      </template>       
      </el-table-column>
    </el-table>





    <el-dialog title="申请新设备" :visible.sync="addApplyShow" width="32%">
      <el-form :model="addApplyList"  label-width="100px" >
        <el-row>
        <el-form-item label="申请设备类型:" :label-width="formLabelWidth">
          <el-select v-model="addApplyList.listType" placeholder="请选择申请类型">
            <el-option
              v-for="dept in macApplyList2"
              :key="dept.value"
              :label="dept.label"
              :value="dept.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请设备数量:" :label-width="formLabelWidth">
          <el-input v-model="addApplyList.nums" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="申请设备原因:" :label-width="formLabelWidth">
          <el-select v-model="addApplyList.why" placeholder="请选择申请原因">
            <el-option
              v-for="dept in macApplyWhyList"
              :key="dept.value"
              :label="dept.label"
              :value="dept.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请金额:" :label-width="formLabelWidth">
          <el-input v-model="addApplyList.money" autocomplete="off"></el-input>
        </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addApplyShow = false">取 消</el-button>
        <el-button type="primary"  @click="addApply()">提交</el-button>
      </div>
    </el-dialog> 


    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="macApply.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="macApply.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        style="text-align: center;"
      >
      </el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      macApplyWhyList:[
          {value: 1,label: '库存不足'},
          {value:2,label:'其他'}
          ],
      macApplyList2:[
          {value:1,label:'U盘'},
          {value:2,label:'硬盘'}
          ],
      addApplyShow: false,
      macApplyList:{},
      addApplyList:{},
      page: {
        pageSizes: [5, 10, 20, 50, 100], //下拉列表中的数组
        total:0, //一共有多少条数据
      },
      update:{},
      macApply: {
        currentPage: 1, //代表当前页
        pageSize: 5, //代表每页显示多少条数据
        why:"",
        dateRange: [],      
      },
    };
  },
  methods: {
    updateg(id,state){
      if(state == 2 || state==3 ){
        alert("无需重复审核")
      }else{
      this.update.id =id;
      this.update.state=2;
       this.$axios.put("/macapply",this.update).then((res)=>{
            if(res.data.code==200){
              alter("通过成功");
            }else{
               alter("通过失败");
            }
       });
      }
      this.showMacApply();
    },
    updateb(id,state){
      if(state == 2 || state==3 ){
        alert("无需重复审核")
      }else{
      this.update.id =id;
      this.update.state=2;
            this.$axios.put("/macapply",this.update).then((res)=>{
            if(res.data.code==200){
              alter("不通过成功");
            }else{
               alter("不通过失败");
            }
      });
       this.showMacApply();
      }
    },
    addApply(){
          this.$axios.post("/macapply",this.addApplyList).then((res)=>{
            if(res.data.code==200){
              alter("提交成功");
            }else{
               alter("申请失败");
            }
      });
        this.addApplyShow=false,
        this.showMacApply();
    },

    addMacApply(){
      this.addApplyShow =true;
    },
     handleSizeChange(val) {
      //当每页数据改变时
      this.showMacIoList.pageSize = val;
      this.showMacIoList();
    },
    handleCurrentChange(val) {
      //当点击页码时
      this.macinfo.currentPage = val;
      this.showMacIoList();
    },
    showMacApply(){
        this.$axios.post("/macapply/selAllMacApply",this.macApply).then((res) => {
        this.macApplyList = res.data.data.macApplyList;
        this.page.total = res.data.data.total;    
        this.macApply.dateRange=[];
      });
    }
  },
  mounted(){
    this.showMacApply();
  }
};
</script>